<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-qrcode margin-top-10">
      <switch-button class="switch-button" :btnStr_0="'自动生成'" :btnStr_1="'手动上传'" :isClick="true">
        <template v-slot:default>
          <input-normal
            :placeholder="'//www.sina.com'"
            :label="'链接地址'"
            v-model="commonAttr.linkUrl"
            @change="onChangeAttr">
          </input-normal>
          <switch-normal v-model="commonAttr.isUploadLogo" :label="'上传logo图'" @change="onChangeAttr" class="margin-top-10"></switch-normal>
          <add-img-con v-if="commonAttr.isUploadLogo" :comAttr="'commonAttr'" :picAttr="'logoUrl'" :url="commonAttr.logoUrl" class="margin-left-right-16" :height="100"></add-img-con>
          <el-button type="primary" class="margin-left-right-16 margin-bottom-10" @click.stop="onGenerateQrcode">生成二维码</el-button>
        </template>
        <template v-slot:custom>
          <p class="margin-left-right-16">上传二维码</p>
          <add-img-con :url="commonAttr.url" :comAttr="'commonAttr'" :picAttr="'url'" class="margin-left-right-16" :height="100"></add-img-con>
        </template>
      </switch-button>
    </el-form>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import SwitchButton from '@/views/components/switch-button.vue';
  import AddImgCon from '@/views/components/add-img-con.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'

  import { mapActions } from 'vuex'
  import { editUtils } from '@/views/js/edit-utils'

  export default {
    name: "RightQrcode",
    mixins: [editUtils],
    components: {
      RightTemplate,
      SwitchButton,
      AddImgCon,
      SwitchNormal,
      InputNormal
    },
    methods:{
      ...mapActions({
        generateQrcode: "components/generateQrcode",
      }),
      onGenerateQrcode(){
        this.generateQrcode({url:this.commonAttr.linkUrl, logo:this.commonAttr.logoUrl, site_id:this.$store.state.components.id});
      }
    }
  }
</script>